<template>
  <div id="app">
    <!-- 导航栏 -->
    <el-container>
      <el-header id="header">
        <!-- active-text-color 这个需要给每个菜单单独的index，不然颜色会乱 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="0">
            <coordinate-system
              theme="outline"
              size="26"
              fill="#fff"
              :strokeWidth="3"
              strokeLinejoin="bevel"
              strokeLinecap="square"
            />武汉智慧交通信息管理系统</el-menu-item
          >
          <!-- 实时路况 通用 -->
          <traffic-status></traffic-status>

          <!-- 查看公告 通用 -->
          <!-- http://t.zoukankan.com/shuaichao-p-12661312.html -->
          <el-menu-item index="2" @click="dialogVisible = true"
            >查看公告</el-menu-item
          >
          <!-- 事故地点 通用 -->
          <el-menu-item index="3" @click="accidentArea">事故地点</el-menu-item>
          <!-- 报告事件 通用 -->
          <el-menu-item index="4" @click="reportAccident"
            >报告事件</el-menu-item
          >
          <!-- 工具箱 通用 -->
          <tool-box></tool-box>

          <!-- 公告处理 traffic -->
          <el-submenu index="6" v-show="trafficId">
            <template slot="title">公告处理</template>
            <el-menu-item index="6-1" @click="announcement">
              <announcement
                theme="two-tone"
                size="26"
                :fill="['#ffffff', '#000000']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />发布公告</el-menu-item
            >
            <el-menu-item index="6-2" @click="announceDel = true">
              <clear
                theme="two-tone"
                size="26"
                :fill="['#ffffff', '#000000']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />删除公告</el-menu-item
            >
          </el-submenu>
          <!-- 事件管理 traffic -->
          <el-submenu index="7" v-show="trafficId">
            <template slot="title">事件管理</template>
            <el-menu-item index="7-1" @click="addEvent"
              ><add-four
                theme="two-tone"
                size="27"
                :fill="['#ffffff', '#000']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />事件添加</el-menu-item
            >
            <el-menu-item index="7-2" @click="auditEvent"
              ><audit
                theme="two-tone"
                size="27"
                :fill="['#000', '#ffffff']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />事件审核</el-menu-item
            >
            <el-menu-item index="7-3" @click="findEvent"
              ><find
                theme="two-tone"
                size="27"
                :fill="['#ffffff', '#000']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />事件查询</el-menu-item
            >
            <el-menu-item index="7-4" @click="detialEvent"
              ><view-grid-detail
                theme="two-tone"
                size="27"
                :fill="['#000', '#ffffff']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />事件详情</el-menu-item
            >
          </el-submenu>
          <!-- 视频监控 traffic admin -->
          <el-menu-item index="8" v-show="trafficId" @click="highlightvideo"
            >视频监控</el-menu-item
          >

          <!-- 搜索框和搜索按钮 通用 -->
          <div id="search">
            <el-input
              class="search_input"
              placeholder="请输入查询交通事故信息"
              v-model="keyword"
              clearable
              @keyup.enter.native="queryBySQL"
              ref="search_event"
            >
            </el-input>
            <el-button @click="queryBySQL">
              <find-one
                theme="two-tone"
                size="18"
                :fill="['#333', '#2F88FF']"
                :strokeWidth="3"
                strokeLinejoin="miter"
                strokeLinecap="butt"
              />
            </el-button>
          </div>

          <!--  用户模块 用户管理 通用 -->
          <div id="user">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <user
                  theme="two-tone"
                  size="18"
                  :fill="['#e0e0e0', '#2F88FF']"
                  :strokeWidth="3"
                  strokeLinejoin="miter"
                  strokeLinecap="butt"
                />
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- 只有管理员才会显示 -->
                <el-dropdown-item @click.native="manageUsers" v-show="adminId"
                  >管理用户</el-dropdown-item
                >
                <el-dropdown-item @click.native="updatePassword"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item @click.native="escLogin"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
              <div id="username">{{ user.user_name }}</div>
            </el-dropdown>
          </div>
        </el-menu>

        <!-- 用户管理弹窗 -->
        <el-dialog
          title="用户管理"
          :visible.sync="manageDialogVisible"
          width="73%"
          top="4vh"
          id="manageDialog"
        >
          <!-- 交通部门 -->
          <div class="trafficUsers">
            <div class="header_box">
              <span>交通部门账号管理</span>
              <div class="Tool">
                <!-- 搜索框 -->
                <el-input
                  v-model="trafficSearch"
                  prefix-icon="el-icon-search"
                  size="mini"
                  placeholder="请输入用户名搜索"
                  ref="trafficSearch"
                  v-on:keyup.enter.native="handleTrafficSearch"
                >
                </el-input>
                <el-button
                  size="small"
                  id="traffic_search"
                  type="primary"
                  icon="el-icon-search"
                  @click="handleTrafficSearch"
                  >搜索</el-button
                >
                <el-button
                  size="small"
                  id="traffic_create"
                  type="primary"
                  icon="el-icon-circle-plus-outline"
                  @click="handleUserAdd('traffic')"
                  >添加</el-button
                >
                <el-button
                  size="small"
                  id="traffic_delete"
                  type="danger"
                  icon="el-icon-remove-outline"
                  @click="deleteTrafficSelections"
                  >选择删除</el-button
                >
              </div>
            </div>
            <!-- traffic -->
            <el-table
              :data="trafficTableData"
              @click.native="clearSearchStyle"
              @selection-change="handleTrafficSelectionChange"
              ref="trafficTable"
              style="width: 100%"
              border
              height="210"
              id="trafficTable"
              :header-cell-style="{
                background: 'rgb(67, 192, 211)',
                color: 'white',
              }"
              :row-style="trafficTableRowClassName"
            >
              <el-table-column
                type="selection"
                width="45"
                align="center"
              ></el-table-column>

              <!-- 序号 -->
              <el-table-column
                prop="id"
                label="序号"
                width="70"
                align="center"
                sortable
              >
              </el-table-column>

              <!-- 用户id -->
              <el-table-column
                prop="user_id"
                label="用户id"
                width="80"
                v-if="false"
              >
              </el-table-column>

              <!-- 用户名 -->
              <el-table-column
                prop="user_name"
                label="用户名"
                min-width="70"
                align="center"
              >
              </el-table-column>

              <!-- 密码 -->
              <el-table-column
                prop="user_password"
                label="密码"
                width="100"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <el-table-column
                label="密码"
                width="120"
                align="center"
                prop="user_password"
              >
                <template slot-scope="scope">
                  <div
                    id="togglePasswordShow"
                    :ref="scope.row.user_id + 'ref_traffic'"
                  >
                    <span>{{ scope.row.hidden_password }}</span>
                    <i
                      @click="handleShowPassword(scope.row)"
                      class="el-icon-view"
                    ></i>
                  </div>
                </template>
              </el-table-column>

              <!-- 类型 -->
              <el-table-column
                prop="user_type"
                label="类型"
                width="90"
                align="center"
              >
              </el-table-column>

              <!-- 登录状态 -->
              <el-table-column
                prop="user_onlinestatus"
                label="登录状态"
                width="100"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <el-table-column
                label="登录状态"
                width="150"
                align="center"
                prop="user_onlinestatus"
              >
                <template slot-scope="scope">
                  <div id="showOnlineState">
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-user-solid"
                      :class="
                        scope.row.user_onlinestatus == '在线' ? 'online' : ''
                      "
                      >在线</el-button
                    >
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-user"
                      :class="
                        scope.row.user_onlinestatus == '离线' ? 'offline' : ''
                      "
                      >离线</el-button
                    >
                  </div>
                </template>
              </el-table-column>

              <!-- 账号状态 -->
              <el-table-column
                prop="user_other"
                label="账号状态"
                width="100"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <el-table-column label="账号状态" width="170" align="center">
                <template slot-scope="scope">
                  <div id="showNumberState">
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-circle-check"
                      :class="
                        scope.row.user_other == '已激活' ? 'onactive' : ''
                      "
                      >已激活</el-button
                    >
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-circle-close"
                      :class="
                        scope.row.user_other == '已删除' ? 'offactive' : ''
                      "
                      >已删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>

              <!-- 操作：下线、切换激活状态、修改、降级/升级 -->
              <el-table-column label="操作" width="270" align="center">
                <template slot-scope="scope">
                  <el-tooltip placement="top">
                    <div slot="content">将当前用户设置<br />为普通用户账号</div>
                    <!--  -->
                    <el-button
                      plain
                      @click="handleupdateUser(scope.row)"
                      type="info"
                      size="small"
                      icon="el-icon-bottom"
                      >降级</el-button
                    >
                  </el-tooltip>
                  <el-button
                    icon="el-icon-edit-outline"
                    size="small"
                    plain
                    type="success"
                    @click="handleEditUser(scope.row)"
                    >修改</el-button
                  >
                  <el-tooltip content="切换 激活 / 删除" placement="top">
                    <el-button
                      plain
                      type="warning"
                      size="small"
                      @click="handleDeleteUser(scope.row)"
                      icon="el-icon-warning-outline"
                      >管理</el-button
                    >
                  </el-tooltip>
                  <el-tooltip content="强制当前用户下线！" placement="top">
                    <el-button
                      plain
                      type="danger"
                      size="small"
                      icon="el-icon-moon-night"
                      @click="handleOffLine(scope.row)"
                      >下线</el-button
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <el-pagination
              small
              @size-change="handleTrafficSizeChange"
              @current-change="handleTrafficCurrentChange"
              @click.native="clearSearchStyle"
              :current-page="currentTrafficPage"
              :page-sizes="[2, 3, 5, 10, 20]"
              :page-size="trafficSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="trafficTotal"
            >
            </el-pagination>
          </div>
          <hr />
          <!-- 普通用户 -->
          <div class="commonUsers">
            <div class="header_box">
              <span>普通用户账号管理</span>
              <div class="Tool">
                <!-- 搜索框 -->
                <el-input
                  v-model="commonSearch"
                  prefix-icon="el-icon-search"
                  size="mini"
                  placeholder="请输入用户名搜索"
                  ref="commonSearch"
                  v-on:keyup.enter.native="handleCommonSearch"
                >
                </el-input>
                <el-button
                  size="small"
                  id="common_search"
                  type="primary"
                  icon="el-icon-search"
                  @click="handleCommonSearch"
                  >搜索</el-button
                >
                <el-button
                  size="small"
                  id="common_create"
                  type="primary"
                  icon="el-icon-circle-plus-outline"
                  @click="handleUserAdd('common')"
                  >添加</el-button
                >
                <el-button
                  size="small"
                  id="common_delete"
                  type="danger"
                  icon="el-icon-remove-outline"
                  @click.native="deleteCommonSelections"
                  >选择删除</el-button
                >
              </div>
            </div>

            <!-- common -->
            <el-table
              :data="commonTableData"
              @click.native="clearSearchStyle"
              @selection-change="handleCommonSelectionChange"
              ref="commonTable"
              style="width: 100%"
              border
              height="210"
              id="commonTable"
              :header-cell-style="{
                background: 'rgb(205,201,201)',
                color: 'white',
              }"
              :row-style="CommonTableRowClassName"
            >
              <el-table-column
                type="selection"
                width="45"
                align="center"
              ></el-table-column>

              <!-- 序号 -->
              <el-table-column
                prop="id"
                label="序号"
                width="70"
                align="center"
                sortable
              >
              </el-table-column>

              <!-- 用户id -->
              <el-table-column
                prop="user_id"
                label="用户id"
                width="80"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <!-- 用户名 -->
              <el-table-column
                prop="user_name"
                label="用户名"
                min-width="70"
                align="center"
              >
              </el-table-column>

              <!-- 密码 -->
              <el-table-column
                prop="user_password"
                label="密码"
                width="100"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <el-table-column
                label="密码"
                width="120"
                align="center"
                prop="user_password"
              >
                <template slot-scope="scope">
                  <div
                    id="togglePasswordShow"
                    :ref="scope.row.user_id + 'ref_common'"
                  >
                    <span>{{ scope.row.hidden_password }}</span>
                    <i
                      @click="handleShowPassword(scope.row)"
                      class="el-icon-view"
                    ></i>
                  </div>
                </template>
              </el-table-column>

              <!-- 类型 -->
              <el-table-column
                prop="user_type"
                label="类型"
                width="90"
                align="center"
              >
              </el-table-column>

              <!-- 登录状态 -->
              <el-table-column
                prop="user_onlinestatus"
                label="登录状态"
                width="100"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <el-table-column
                label="登录状态"
                width="150"
                align="center"
                prop="user_onlinestatus"
              >
                <template slot-scope="scope">
                  <div id="showOnlineState">
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-user-solid"
                      :class="
                        scope.row.user_onlinestatus == '在线' ? 'online' : ''
                      "
                      >在线</el-button
                    >
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-user"
                      :class="
                        scope.row.user_onlinestatus == '离线' ? 'offline' : ''
                      "
                      >离线</el-button
                    >
                  </div>
                </template>
              </el-table-column>

              <!-- 账号状态 -->
              <el-table-column
                prop="user_other"
                label="账号状态"
                width="100"
                align="center"
                v-if="false"
              >
              </el-table-column>

              <el-table-column
                label="账号状态"
                width="170"
                align="center"
                prop="user_other"
              >
                <template slot-scope="scope">
                  <div id="showNumberState">
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-circle-check"
                      :class="
                        scope.row.user_other == '已激活' ? 'onactive' : ''
                      "
                      >已激活</el-button
                    >
                    <el-button
                      plain
                      type="info"
                      size="small"
                      icon="el-icon-circle-close"
                      :class="
                        scope.row.user_other == '已删除' ? 'offactive' : ''
                      "
                      >已删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>

              <!-- 操作：下线、切换激活状态、修改、降级/升级 -->
              <el-table-column label="操作" width="270" align="center">
                <template slot-scope="scope">
                  <el-tooltip placement="top">
                    <div slot="content">将当前用户升级<br />为交管部门账号</div>
                    <el-button
                      plain
                      @click="handleupdateUser(scope.row)"
                      type="info"
                      size="small"
                      icon="el-icon-top"
                      >升级</el-button
                    >
                  </el-tooltip>
                  <el-button
                    icon="el-icon-edit-outline"
                    size="small"
                    plain
                    type="success"
                    @click="handleEditUser(scope.row)"
                    >修改</el-button
                  >
                  <el-tooltip content="切换 激活 / 删除" placement="top">
                    <el-button
                      plain
                      type="warning"
                      size="small"
                      @click="handleDeleteUser(scope.row)"
                      icon="el-icon-warning-outline"
                      >管理</el-button
                    >
                  </el-tooltip>

                  <el-tooltip content="强制当前用户下线！" placement="top">
                    <el-button
                      plain
                      type="danger"
                      size="small"
                      icon="el-icon-moon-night"
                      @click="handleOffLine(scope.row)"
                      >下线</el-button
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              small
              @size-change="handleCommonSizeChange"
              @current-change="handleCommonCurrentChange"
              @click.native="clearSearchStyle"
              :current-page="currentCommonPage"
              :page-sizes="[2, 3, 5, 10, 20]"
              :page-size="commonSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="commonTotal"
            ></el-pagination>
          </div>
        </el-dialog>

        <!-- 用户管理-管理员添加用户弹窗 -->
        <el-dialog
          :title="addType"
          :visible.sync="addDialogVisible"
          width="25%"
          id="addDialog"
        >
          <el-form
            :model="addForm"
            :rules="addRules"
            ref="addForm"
            label-width="85px"
            :label-position="labelPosition"
          >
            <el-form-item label="用户类型" prop="user_type"
              ><el-input v-model="addForm.user_type" disabled></el-input
            ></el-form-item>
            <el-form-item label="用户名" prop="user_name"
              ><el-input v-model="addForm.user_name"></el-input
            ></el-form-item>
            <el-form-item label="密码" prop="user_password"
              ><el-input
                v-model="addForm.user_password"
                placeholder="请输入密码"
                show-password
              ></el-input
            ></el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword"
              ><el-input
                v-model="addForm.confirmPassword"
                placeholder="请确认密码"
                show-password
              ></el-input
            ></el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click.native="cancelAdd">取 消</el-button>
            <el-button type="primary" @click.native="submitAdd"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <!-- 用户管理-管理员修改当前用户弹窗 -->
        <el-dialog
          title="修改密码"
          :visible.sync="editDialogVisible"
          width="25%"
          id="EditDialog"
        >
          <el-form
            :model="editForm"
            :rules="editRules"
            ref="editForm"
            label-width="85px"
            :label-position="labelPosition"
          >
            <el-form-item label="用户名" prop="user_name"
              ><el-input v-model="editForm.user_name"></el-input
            ></el-form-item>
            <el-form-item label="密码" prop="user_password"
              ><el-input
                v-model="editForm.user_password"
                placeholder="请设置密码"
              ></el-input
            ></el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click.native="submitEdit"
              >确 定</el-button
            >
            <el-button @click.native="cancelEdit">取 消</el-button>
          </span>
        </el-dialog>

        <!-- 修改密码弹窗 -->
        <el-dialog
          title="修改密码"
          :visible.sync="updateDialogVisible"
          width="25%"
          id="updateDialog"
        >
          <el-form
            :model="updateForm"
            :rules="updateRules"
            ref="updateForm"
            label-width="85px"
            :label-position="labelPosition"
          >
            <el-form-item label="用户名" prop="user_name"
              ><el-input v-model="updateForm.user_name" disabled></el-input
            ></el-form-item>
            <el-form-item label="原密码" prop="old_password"
              ><el-input
                v-model="updateForm.old_password"
                placeholder="请输入原密码"
                show-password
              ></el-input
            ></el-form-item>
            <el-form-item label="新密码" prop="new_password"
              ><el-input
                v-model="updateForm.new_password"
                placeholder="请输入新密码"
                show-password
              ></el-input
            ></el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword"
              ><el-input
                v-model="updateForm.confirmPassword"
                placeholder="请确认新密码"
                show-password
              ></el-input
            ></el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click.native="cancelUpdate">取 消</el-button>
            <el-button type="primary" @click.native="submitUpdate"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <!-- 查看公告弹窗 -->
        <view-announcement
          :dialogVisible="dialogVisible"
          @send="changeShow"
          ref="child1"
        ></view-announcement>

        <!-- 事故地点弹窗（热力图）  X -->
        <accident-map :accidentMapVisible="accidentMapVisible"></accident-map>
      </el-header>

      <!-- 报告事件（路况）弹窗 -->
      <report-accident
        :dialogFormVisible1="dialogFormVisible"
        @send="changeVisible"
      ></report-accident>

      <!-- 公告处理-发布公告弹窗 -->
      <div
        class="announcement"
        title="发布公告"
        v-show="showAnnounce"
        width="30%"
        :before-close="handleClose"
      >
        <close
          class="close"
          theme="two-tone"
          size="27"
          :fill="['#000000', '#ffffff']"
          :strokeWidth="3"
          strokeLinejoin="miter"
          strokeLinecap="butt"
          @click="closeA"
        />
        <el-form :rules="Noticerules" :model="NoticeForm" ref="NoticeForm">
          <!-- 发布人 -->
          <el-form-item label="发布人" prop="user_id">
            <el-input
              disabled
              size="min"
              style="width: 300px"
              v-model="NoticeForm.user_id"
            ></el-input>
          </el-form-item>

          <!-- 区域名称和物业电话 -->
          <el-table :data="tableData" height="200" border style="width: 95%">
            <el-table-column prop="area_name" label="区域名称">
            </el-table-column>
            <el-table-column prop="number" label="物业电话"> </el-table-column>
          </el-table>

          <!-- 公告内容 -->
          <el-form-item laber="公告内容">
            <el-input
              v-model="NoticeForm.notice_content"
              size="min"
              type="textarea"
              style="width: 450px"
              :rows="6"
              placeholder="请输入公告内容"
            ></el-input>
          </el-form-item>

          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">发布公告</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 公告处理-删除公告弹窗 -->
      <el-dialog
        title="删除公告"
        :visible.sync="announceDel"
        width="55%"
        :before-close="handleClose"
      >
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="24" :offset="0">
            <el-input
              placeholder="请输入搜索关键词"
              size="middle"
              class="el-icon-search"
              v-model="delinput"
              @keyup.enter.native="searchDelete"
            >
            </el-input>
          </el-col>
        </el-row>

        <!-- 显示全部公告 -->
        <el-table border :data="gg_notice" class="notice">
          <!-- id -->
          <el-table-column
            label="id"
            prop="notice_id"
            sortable
            width="55px"
            align="center"
          ></el-table-column>

          <!-- 公告内容 -->
          <el-table-column
            show-overflow-tooltip
            label="公告内容"
            prop="notice_content"
            min-width="300px"
            align="center"
          ></el-table-column>

          <!-- 时间 -->
          <el-table-column
            label="时间"
            prop="notice_time"
            width="170px"
            align="center"
          ></el-table-column>

          <!-- 操作-删除公告 -->
          <el-table-column
            label="操作"
            width="100px"
            height="50px"
            align="center"
          >
            <template v-slot="gg_notice">
              <el-button
                type="text"
                size="middle"
                @click="handleDelete(gg_notice.row.notice_id)"
              >
                删除该公告
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[3, 6, 9, 16]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button class="quxiao" @click="announceDel = false"
            >取消</el-button
          >
          <el-button class="queding" type="primary" @click="announceDel = false"
            >确定</el-button
          >
        </span>
      </el-dialog>

      <!-- 事件管理-添加事件弹窗 -->
      <div v-show="eventAdd" id="eventAdd">
        <el-form :modle="form" ref="form" label-width="80px">
          <div id="addEventTitle">
            <span>添加事件</span>
          </div>
          <!-- 事件添加类型 -->
          <el-form-item label="添加事件">
            <el-select v-model="form.region" placeholder="请选择类型">
              <el-option label="碰撞" value="碰撞"></el-option>
              <el-option label="刮碰" value="刮碰"></el-option>
              <el-option label="失火" value="失火"></el-option>
              <el-option label="追尾" value="追尾"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <!-- 事发地点 -->
          <el-form-item label="事发地点">
            <el-input v-model="form.place"></el-input>
          </el-form-item>
          <!-- 驾驶员 -->
          <el-form-item label="驾驶员">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <!-- 车牌号 -->
          <el-form-item label="车牌号">
            <el-input v-model="form.card"></el-input>
          </el-form-item>
          <!-- 处理状态 -->
          <el-form-item label="处理状态">
            <el-switch
              v-model="form.stats"
              @click.native="changeProcessingState"
            >
            </el-switch>
            <span>{{ form.processingState }}</span>
          </el-form-item>
          <!-- 事发时间-日期-时间 -->
          <el-form-item label="事发时间">
            <!-- 日期 -->
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.Data"
                style="width: 100%"
              ></el-date-picker
            ></el-col>
            <el-col :span="2">-</el-col>
            <!-- 时间 -->
            <el-col :span="11"
              ><el-time-picker
                placeholder="选择时间"
                v-model="form.Time"
                style="width: 100%"
              ></el-time-picker
            ></el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createEvent">创建事件</el-button>
            <el-button @click="hideAddEvent">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 事件管理-事件审核弹窗 -->
      <audit-event
        :dialogFormVisible2="dialogFormVisible1"
        @send="changeVisible1"
      ></audit-event>
      <!-- 事件管理-事件查询弹窗 -->
      <find-event
        :dialogFormVisible4="dialogFormVisible3"
        :queryEventsData1="queryEventsData"
        @send="changeVisible3"
      ></find-event>
      <!-- 事件管理-事件详情弹窗 -->
      <detial-event
        :dialogFormVisible3="dialogFormVisible2"
        @send="changeVisible2"
      ></detial-event>
    </el-container>

    <!-- 地图部分 -->
    <map-com></map-com>
    <!-- 目录图层   只有traffic和admin才会显示 -->
    <map-catalog v-show="trafficId"></map-catalog>
  </div>
</template>

<script>
import {
  Alarm,
  CoordinateSystem,
  FindOne,
  User,
  Announcement,
  Clear,
  Close,
  AddFour,
  Audit,
  Find,
  ViewGridDetail,
} from '@icon-park/vue'
import mapCom from '../components/MapCom.vue'
import mapCatalog from '../components/MapCatalog.vue'
import toolBox from '../components/ToolBox.vue'
import trafficStatus from '../components/TrafficStatus.vue'
import ViewAnnouncement from '../components/ViewAnnouncement.vue'
import accidentMap from '../components/AccidentMap.vue'
import reportAccident from '../components/ReportAccident.vue'
import auditEvent from '../components/AuditEvent.vue'
import findEvent from '../components/FindEvent.vue'
import detialEvent from '../components/DetialEvent.vue'
import { mapState } from 'vuex'
export default {
  components: {
    Alarm,
    CoordinateSystem,
    FindOne,
    User,
    Announcement,
    Clear,
    Close,
    AddFour,
    Audit,
    Find,
    ViewGridDetail,
    mapCom,
    mapCatalog,
    toolBox,
    trafficStatus,
    ViewAnnouncement,
    accidentMap,
    reportAccident,
    auditEvent,
    findEvent,
    detialEvent,
  },
  name: 'Home',
  data() {
    // 重置密码相关
    var validateOldPassword = (rule, value, callback) => {
      if (this.checkOldPassword()) {
        callback(new Error('密码错误，请重新输入'))
      } else {
        callback()
      }
    }
    var validateUpdateConfirmPassword = (rule, value, callback) => {
      if (this.checkUpdateConfirmPassword()) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    var validateAddConfirmPassword = (rule, value, callback) => {
      if (this.checkAddConfirmPassword()) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    var validPassword = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/
      if (!reg.test(value)) {
        callback(new Error('密码必须是由6-10位字母+数字组合'))
      } else {
        callback()
      }
    }
    var validateInput = (rule, value, callback) => {
      if (!this.checkSpecialKey(value)) {
        callback(new Error('不能含有特殊字符/、*、-、`、#'))
      } else if (this.checkuser_name()) {
        callback(new Error('该用户名已存在，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      tableData: [
        { area_name: '洪山区人民法院', number: '18756147813' },
        { area_name: '同学广场', number: '18756147814' },
        { area_name: '华罗丽', number: '18756147826' },
        { area_name: '洪福添美', number: '18756147890' },
        { area_name: '洪福家园', number: '18756147891' },
        { area_name: '紫菘枫林上城', number: '18756147892' },
        { area_name: '阳光在线2期', number: ' 18756147893' },
      ],
      user: {},
      trafficTableData: [],
      commonTableData: [],
      trafficSelections: [],
      commonSelections: [],
      gg_notice: [],
      baseMapCoordinatePoints: [],
      trafficTotal: 0,
      commonTotal: 0,
      activeIndex: '1',
      currentTrafficPage: 1,
      currentCommonPage: 1,
      trafficSize: 3,
      commonSize: 3,
      new_traffic_row: -1,
      new_common_row: -1,
      //删除公告的分页器
      page: 1, // 当前的页码数
      size: 3, // 每页显示记录数
      total: 0, // 记录总数
      // 地图的layer、source和pointLayer
      layer: '',
      source: '',
      pointLayer: '',
      search_input: '',
      trafficSearch: '',
      commonSearch: '',
      keyword: '',
      input1: '',
      delinput: '',
      mouseXCoordinate: '',
      mouseYCoordinate: '',
      queryEventsData: '',
      addType: '添加交通部门账号',
      labelPosition: 'right',
      showHeatMap: 'false',
      showAnnounce: false,
      flag: true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      accidentMapVisible: false,
      announceDel: false,
      dialogVisible: false,
      manageDialogVisible: false,
      updateDialogVisible: false,
      adminId: false,
      trafficId: false,
      addDialogVisible: false,
      editDialogVisible: false,
      eventAdd: false,
      // 添加事件
      form: {
        region: '',
        place: '',
        name: '',
        card: '',
        stats: false,
        type: [],
        Data: '',
        Time: '',
        processingState: '未处理',
      },
      // 发布公告
      NoticeForm: {
        user_id: '',
        notice_content: '',
      },
      // 发布公告规则
      Noticerules: {
        notice_content: [
          { required: true, message: '发布内容不能为空', trigger: 'blur' },
          {
            min: 3,
            max: 200,
            message: '长度在不能少于3个字符',
            trigger: 'blur',
          },
        ],
        user_id: [
          { required: true, message: '发布者不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在不能小于1个字符',
            trigger: 'blur',
          },
        ],
      },
      // 修改密码
      updateForm: {
        user_name: '',
        old_password: '',
        new_password: '',
        confirmPassword: '',
        user_onlinestatus: 0,
      },
      // 添加用户
      addForm: {
        user_name: '',
        user_type: '普通用户',
        user_password: '',
        confirmPassword: '',
      },
      // 修改用户
      editForm: {
        user_id: '',
        user_type: '',
        user_name: '',
        user_password: '',
        user_onlinestatus: 0,
      },
      old_password: '',
      // 更改密码规则
      updateRules: {
        old_password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          {
            validator: validateOldPassword,
            trigger: 'blur',
          },
        ],
        new_password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            validator: validPassword,
            trigger: ['blur'],
          },
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateUpdateConfirmPassword, trigger: 'blur' },
        ],
      },
      // 添加用户规则
      addRules: {
        user_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            type: 'string',
            message: '请输入正确的用户名',
            trigger: ['blur', 'change'],
          },
          { min: 2, max: 7, message: '长度在2~7个字符', trigger: 'blur' },
          { validator: validateInput, trigger: ['blur', 'change'] },
        ],
        user_password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            validator: validPassword,
            trigger: ['blur'],
          },
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateAddConfirmPassword, trigger: 'blur' },
        ],
      },
      // 修改用户规则
      editRules: {
        user_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            type: 'string',
            message: '请输入正确的用户名',
            trigger: ['blur', 'change'],
          },
          { min: 2, max: 7, message: '长度在2~7个字符', trigger: 'blur' },
          { validator: validateInput, trigger: ['blur', 'change'] },
        ],
        user_password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            validator: validPassword,
            trigger: ['blur'],
          },
        ],
      },
    }
  },
  watch: {
    input1() {
      if (this.input1 == '') {
        this.getAllnotice()
        console.log('监听到了1')
      }
    },
    delinput() {
      if (this.delinput == '') {
        this.getAllnotice()
        console.log('监听到了2')
      }
    },
  },
  computed: {
    ...mapState(['map']),
  },
  mounted() {
    this.getCookies()
    this.getAll()
    // 搜索框查询
    // this.$refs.search_event.focus()
    /* 公告处理 */
    this.getAllnotice()
  },
  methods: {
    show() {
      console.log(this.form.Data)
      console.log(this.form.Time)
    },
    // 获取cookies
    getCookies() {
      let status = this.$cookies.get('status')
      // console.log(this.user)
      this.user = status
      this.NoticeForm.user_id = status.user_name
      this.old_password = status.user_password
      console.log(this.old_password)
      // 判断用户身份
      if (this.user.user_type == 'traffic') {
        this.trafficId = true
      } else if (this.user.user_type == 'admin') {
        this.trafficId = true
        this.adminId = true
      }
    },
    // 获取用户信息
    getAll() {
      this.$http.get('/gg_user').then((res) => {
        if (res.code == 0) {
          this.all = res.result
          // console.log(this.all)
        }
      })
    },

    // 查询数据库内容
    queryBySQL() {
      //1-1设置查询结构
      const queryStruct = new Zondy.Service.QueryFeatureStruct()
      queryStruct.IncludeGeometry = true
      queryStruct.IncludeWebGraphic = true
      //1-2 设置查询参数where条件
      //实例化查询参数对象
      const queryParam = new Zondy.Service.QueryParameter({
        struct: queryStruct,
        recordNumber: 100,
      })
      if (this.keyword == '已处理') {
        this.keyword = 2
      } else if (this.keyword == '未处理') {
        this.keyword = 0
      } else if (this.keyword == '') {
        /* return this.source.clear(); */
        return window.location.reload()
      }
      queryParam.where = `事件类型 LIKE '%${this.keyword}%' or 发生地点 LIKE '%${this.keyword}%' or 处理状态 LIKE '%${this.keyword}%'`
      /* console.log(queryParam.where) */
      //1-3 调用查询服务器
      const queryService = new Zondy.Service.QueryDocFeature(
        queryParam,
        'guanggu',
        2,
        {
          ip: 'localhost',
          port: 6163,
        }
      )
      queryService.query(querySuccess)
      var source = new ol.source.Vector({
        wrapX: false,
      })
      var highLightLayer = new ol.layer.Vector({
        source,
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 10,
            /* 填充色 */
            fill: new ol.style.Fill({
              color: '#FF3030',
            }),
            /* 描边 */
            stroke: new ol.style.Stroke({
              color: '#ff2d51',
              width: 2,
            }),
          }),
        }),
      })
      this.map.addLayer(highLightLayer)
      var that = this
      function querySuccess(result) {
        //初始化Zondy.Format.PolygonJSON类
        var format = new Zondy.Format.PolygonJSON()
        //将MapGIS要素JSON反序列化 ol.Feature类型数组
        var features = format.read(result)
        console.log(features)
        if (features) {
          source.addFeatures(features)
        }
      }
    },

    /*                                     查看公告相关                       */
    // 公告弹窗
    changeShow(data) {
      if (data === 'false') {
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
      }
    },

    /*                                       事故地点                        */
    accidentArea() {
      if (this.showHeatMap == true) {
        this.showHeatMap = false
      } else {
        this.showHeatMap = true
      }
      this.$store.commit('Accident', this.showHeatMap)
    },
    // 热力图显示和隐藏
    generationMap() {
      this.accidentMapVisible = !this.accidentMapVisible
    },

    /*                                        报告事件                        */
    // 报告事件弹窗
    reportAccident() {
      this.dialogFormVisible = true
    },
    // 报告事件弹窗关闭
    changeVisible() {
      this.dialogFormVisible = false
    },

    /*                                      公告处理                         */
    // 发布公告
    announcement() {
      var source = new ol.source.Vector({
        wrapX: false,
      })
      var layer = new ol.layer.Vector({
        source,
      })
      this.source = source
      this.layer = layer
      this.map.addLayer(this.layer)
      var that = this
      var draw = createDraw({
        type: 'LineString',
        source,
        callback: handleDraw,
      })
      this.pointLayer = draw
      this.map.addInteraction(this.pointLayer)
      function handleDraw(e) {
        console.log(e)
        var position = e.feature.getGeometry().getCoordinates()
        console.log(position)
        that.map.removeInteraction(that.pointLayer)

        var pointObj = new Array()
        for (
          var i = 0;
          i < e.feature.getGeometry().getCoordinates().length;
          i++
        ) {
          var pointGeo = new Zondy.Object.Point2D(
            e.feature.getGeometry().getCoordinates()[i][0],
            e.feature.getGeometry().getCoordinates()[i][1]
          )
          pointObj.push(pointGeo)
        }
        var gArc = new Zondy.Object.Arc(pointObj)
        //构成线的折线
        var gAnyLine = new Zondy.Object.AnyLine([gArc])
        //设置线要素的几何信息
        var gline = new Zondy.Object.GLine(gAnyLine)
        //设置要素的几何信息
        var fGeom = new Zondy.Object.FeatureGeometry({ LinGeom: [gline] })
        //设置属性结构
        var regAttStr = new Zondy.Object.CAttStruct({
          FldName: ['ID', '面积', '周长', 'LayerID'],
          FldNumber: 4,
          FldType: ['FldLong', 'FldDouble', 'FldDouble', 'FldLong'],
        })
        //实例化CAttDataRow类
        var values = [0, 62.566714, 50.803211, 0]
        var valuesRow = new Zondy.Object.CAttDataRow(values, 1)
        //实例化FeatureBuffBySingleRing类，设置要素缓冲分析必要参数，输出分析结果到缓冲分析结果图层
        var featureBufBySR = new Zondy.Service.FeatureBuffBySingleRing({
          ip: 'localhost',
          port: 6163,
          //设置要素缓冲分析左半径
          leftRad: 0.002,
          //设置要素缓冲分析右半径
          rightRad: 0.002,
        })
        /*设置缓冲分析参数*/
        //设置几何信息
        featureBufBySR.sfGeometryXML = JSON.stringify([fGeom])
        //设置属性结构
        featureBufBySR.attStrctXML = JSON.stringify(regAttStr)
        //设置属性值
        featureBufBySR.attRowsXML = JSON.stringify([valuesRow])
        //设置追踪半径
        featureBufBySR.traceRadius = 0.0001
        //设置缓冲结果的名称以及存放地址
        featureBufBySR.resultName =
          'gdbp://MapGisLocal/wuhan/ds/buffer/sfcls/bufferresult' + Date.now()
        //调用Zondy.Service.AnalysisBase基类的execute方法执行要素缓冲分析，AnalysisSuccess为回调函数。
        /* startPressBar(); */
        featureBufBySR.execute(bufferSuccess, 'post', false, 'json')

        function bufferSuccess(result) {
          var clspath = result.results[0].Value
          /* console.log(clspath) */
          //实例化ClipByLayer类
          var clipParam = new Zondy.Service.ClipByLayer({
            ip: 'localhost',
            port: 6163,
            //源简单要素类的URL
            srcInfo1: 'gdbp://MapGisLocal/wuhan/sfcls/居民区',
            //裁剪框简单要素类的URL
            srcInfo2: clspath,
            //设置结果URL
            desInfo:
              'gdbp://MapGisLocal/wuhan/ds/clip/sfcls/clipresult' + Date.now(),
            infoOptType: 0,
          })
          //调用基类的execute方法，执行图层裁剪分析。AnalysisSuccess为结果回调函数
          clipParam.execute(clipSuccess, 'post', false, 'json')

          function clipSuccess(result) {
            console.log(result.results[0].Value)
            if (result.succeed) {
              const resultLayer = new Zondy.Map.GdbpLayer(
                '',
                [result.results[0].Value],
                {
                  ip: 'localhost',
                  port: 6163,
                }
              )
              that.map.addLayer(resultLayer)
              that.showAnnounce = true
            }
          }
        }
      }
    },
    // 发布公告弹窗-提交按钮
    onSubmit() {
      // 通过ref获取组件对象
      this.$refs['NoticeForm'].validate((valid) => {
        if (valid) {
          // 表单验证通过
          var id = this.$cookies.get('status').user_id
          // 发送ajax请求
          this.$http
            .post('/gg_notice', {
              user_id: id,
              notice_content: this.NoticeForm.notice_content,
            })
            .then((res) => {
              // 1. 关闭对话框
              this.showAnnounce = false
              //2.重新获取数据
              this.getAllnotice()
              // 3. 清空表单
              this.$refs['NoticeForm'].resetFields()
            })
          window.location.reload()
          this.$message({
            message: '发布成功',
            type: 'success',
          })
        }
      })
    },
    // 发布公告弹窗-关闭图标
    closeA() {
      this.showAnnounce = false
    },
    /* 视频监控 */
    handleClose(done) {
      this.flag = true
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 获取所有公告
    getAllnotice() {
      this.$http
        .get(`/gg_notice?page=${this.page}&size=${this.size}`)
        .then((res) => {
          // 1. 更新total
          this.total = res.result.total
          // 2. 更新users数组
          this.gg_notice = res.result.data
        })
    },

    // 删除公告-改变分页
    handleSizeChange(newsize) {
      if (this.input1 == '' && this.delinput != '') {
        this.size = newsize //检测到每页显示条数size的改变,同时size的值由原来的2变成现在的被点击的值
        this.searchHandler()
      } else if (this.delinput == '' && this.input1 != '') {
        this.size = newsize //检测到每页显示条数size的改变,同时size的值由原来的2变成现在的被点击的值
        this.searchDelete()
      } else if (this.input1 == '' && this.delinput == '') {
        // 改变每页显示记录数
        this.size = newsize //检测到每页显示条数size的改变,同时size的值由原来的2变成现在的被点击的值
        this.getAllnotice()
      }
    },
    // 删除公告-改变分页
    handleCurrentChange(newpage) {
      if (this.input1 == '' && this.delinput != '') {
        this.page = newpage //检测到页数改变同时page的值由原来的1变成了现在被点击的值
        this.searchHandler()
      } else if (this.delinput == '' && this.input1 != '') {
        this.page = newpage //检测到页数改变同时page的值由原来的1变成了现在被点击的值
        this.searchDelete()
      } else if (this.input1 == '' && this.delinput == '') {
        // 改变每页显示记录数
        this.page = newpage //检测到页数改变同时page的值由原来的1变成了现在被点击的值
        this.getAllnotice()
      }
    },
    // 删除公告-搜索模块
    searchDelete() {
      if (this.delinput != '') {
        this.page = 1
        this.$http
          .get(
            `/gg_notice/?notice_content=${this.delinput}&page=${this.page}&size=${this.size}`
          )
          .then((res) => {
            if (res.result.total == 0) {
              this.$message({
                message: '您搜素的内容不存在,可尝试重新设置关键字查询',
                type: 'warning',
                duration: 1500,
              })
            } else {
              this.searchData = res.result.data

              this.total = res.result.total
              this.gg_notice = this.searchData
            }
          })
      } else {
        this.$message({
          message: '搜索内容不能为空?请重新输入!',
          type: 'warning',
        })
        this.gg_notice = []
        this.getAllnotice()
      }
    },
    searchHandler(m) {
      if (this.input1 != '') {
        this.page = 1
        this.$http
          .get(
            `/gg_notice/?notice_content=${this.input1}&page=${this.page}&size=${this.size}`
          )
          .then((res) => {
            if (res.result.total == 0) {
              this.$message({
                message: '您搜素的内容不存在,可尝试重新设置关键字查询',
                type: 'warning',
                duration: 1500,
              })
            } else {
              console.log('hello', res)
              this.searchData = res.result.data
              console.log(this.searchData)
              this.total = res.result.total
              this.gg_notice = this.searchData
            }
          })
      } else {
        this.$message({
          message: '搜索内容不能为空?请重新输入!',
          type: 'warning',
        })
        this.gg_notice = []
        this.getAllnotice()
      }
    },
    // 删除公告-操作-删除按钮
    handleDelete(id) {
      console.log(id)
      this.$http.delete('/gg_notice/' + id).then((res) => {
        // console.log(res.result);
        this.getAllnotice()
        this.gg_notice = res.result
        //console.log(this.singlenotice);
      })
      this.openDelete()
    },
    // 删除公告-操作-删除成功
    openDelete() {
      this.$alert('<strong>删除成功</strong>', '提示', {
        dangerouslyUseHTMLString: true,
      })
    },

    /*                                   事件管理弹窗相关                     */
    // 添加事件
    addEvent() {
      var source = new ol.source.Vector({
        wrapX: false,
      })
      var layer = new ol.layer.Vector({
        source,
      })
      this.source = source
      this.layer = layer
      this.map.addLayer(this.layer)
      var that = this
      var draw = createDraw({
        type: 'Point',
        source,
        callback: handleDraw,
      })
      this.pointLayer = draw
      this.map.addInteraction(this.pointLayer)
      function handleDraw(e) {
        that.eventAdd = true
        // if (that.mouseXCoordinate > 0) {
        //   that.eventAdd = true
        // }
        // if (window.event.pageY > 330) {
        //   that.mouseYCoordinate = 300
        // } else if (window.event.pageY < 173) {
        //   that.mouseYCoordinate = 120
        // } else {
        //   that.mouseYCoordinate = window.event.pageY
        // }
        // if (window.event.pageX > 1048) {
        //   that.mouseXCoordinate = 1048
        // } else {
        //   that.mouseXCoordinate = window.event.pageX
        // }
        var position = e.feature.getGeometry().getCoordinates()
        // console.log(position)
        that.baseMapCoordinatePoints = position
        that.map.removeInteraction(that.pointLayer)
      }
    },
    // 添加事件弹窗-改变处理状态
    changeProcessingState() {
      console.log(this.form.stats)
      if (this.form.stats == false) {
        this.form.processingState = '未处理'
      } else {
        this.form.processingState = '已处理'
      }
    },
    // 添加事件弹窗-创建事件按钮
    createEvent() {
      this.eventAdd = false
      /* 2.1构建几何信息 */
      /* 创建一个点形状,描述点形状的几何信息 */
      var docLayer = new Zondy.Map.Doc('', 'guanggu', {
        ip: 'localhost',
        port: 6163,
      })
      var gpoint = new Zondy.Object.GPoint(
        this.baseMapCoordinatePoints[0],
        this.baseMapCoordinatePoints[1]
      )
      /* 设置当前点要素的几何信息 */
      var fGeom = new Zondy.Object.FeatureGeometry({
        PntGeom: [gpoint],
      })
      /* 2.2 设置样式信息 */
      var color = 6
      if (this.form.stats == false) {
        color = 6
      } else {
        color = 90
      }
      var pointInfo = new Zondy.Object.CPointInfo({
        Angle: 0,
        Color: color, //子图的颜色
        Space: 0,
        SymHeight: 5, //点的高度
        SymID: 21,
        SymWidth: 5, //点的宽度
      })
      /* 设置当点要素的图形参数信息 */
      var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
        InfoType: 1, //点
        PntInfo: pointInfo,
      })
      /* 2.3 设置属性信息 */
      /* 设置添加点要素的属性信息 */
      var eventLevel = ''
      var processingState = ''
      if (this.form.region == '刮碰' || this.form.region == '其他') {
        eventLevel = 1
      } else if (this.form.region == '碰撞') {
        eventLevel = 2
      } else if (this.form.region == '追尾') {
        eventLevel = 3
      } else if (this.form.region == '失火') {
        eventLevel = 4
      }
      if (this.form.stats == false) {
        processingState = 0
      } else {
        processingState = 2
      }
      var date3 = this.form.Time.toString()
      var year = date3[11] + date3[12] + date3[13] + date3[14]
      var month = date3[4] + date3[5] + date3[6]
      var month_new = ''
      if (month == 'Jan') {
        month_new = 1
      } else if (month == 'Feb') {
        month_new = 2
      } else if (month == 'Mar') {
        month_new = 3
      } else if (month == 'Apr') {
        month_new = 4
      } else if (month == 'May') {
        month_new = 5
      } else if (month == 'Jun') {
        month_new = 6
      } else if (month == 'Jul') {
        month_new = 7
      } else if (month == 'Aug') {
        month_new = 8
      } else if (month == 'Sep') {
        month_new = 9
      } else if (month == 'Oct') {
        month_new = 10
      } else if (month == 'Nov') {
        month_new = 11
      } else if (month == 'Dec') {
        month_new = 12
      }
      var month_new_new = month_new + '.' + date3[8] + date3[9]
      var hour = date3[16] + date3[17] + ':' + date3[19] + date3[20]
      var time = year + '.' + month_new_new + ' ' + hour
      /* console.log(time) */
      var attValue = [
        'SJ201812090079',
        this.form.region,
        eventLevel,
        time,
        this.form.place,
        this.form.card,
        this.form.name,
        processingState,
      ]
      /* 2.4  构建要素对象 */
      var feature = new Zondy.Object.Feature({
        fGeom: fGeom, //坐标--几何信息
        GraphicInfo: webGraphicInfo, //样式信息
        AttValue: attValue, //属性
      })
      console.log(attValue)
      feature.setFType(1)
      /* 2.5 设置要素集 */
      //创建一个要素数据集
      var featureSet = new Zondy.Object.FeatureSet()
      /* 设置属性结构 */
      var cAttStruct = new Zondy.Object.CAttStruct({
        FldName: [
          '事件编号',
          '事件类型',
          '事件等级',
          '发生时间',
          '发生地点',
          '车牌号',
          '驾驶员',
          '处理状态',
        ], //属性的字段名
        FldNumber: 8, //属性的个数
        FldType: [
          'string',
          'string',
          'int',
          'string',
          'string',
          'string',
          'string',
          'int',
        ], //属性的类型
      })
      featureSet.AttStruct = cAttStruct
      /* 添加要素到要素数据集 */
      featureSet.addFeature(feature)
      var editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
        ip: 'localhost',
        port: '6163', //访问IGServer的端口号, .net为6163,Java为8089
      })
      //执行添加点要素功能
      var that = this
      editService.add(featureSet, onPntSuccess)
      function onPntSuccess(data) {
        if (data.succeed) {
          that.$message({
            message: '添加事件成功',
            type: 'success',
          })
          /* window.location.reload(); */
        } else {
          alert('添加点要素失败')
        }
      }
    },
    // 添加事件弹窗-取消按钮
    hideAddEvent() {
      ;(this.eventAdd = false), this.source.clear()
    },
    // 事件审核
    auditEvent() {
      this.dialogFormVisible1 = true
    },
    // 事件审核弹窗-接收子组件信息
    changeVisible1() {
      this.dialogFormVisible1 = false
    },
    //
    changeVisible2() {
      this.dialogFormVisible2 = false
    },
    //
    changeVisible3() {
      this.dialogFormVisible3 = false
    },
    // 事件查询
    findEvent() {
      var source = new ol.source.Vector({
        wrapX: false,
      })
      var layer = new ol.layer.Vector({
        source,
      })
      this.map.addLayer(layer)

      var that = this

      var draw = createDraw({
        type: 'Rectangle',
        source,
        callback: handleDraw,
      })
      this.map.addInteraction(draw)

      /* 获取坐标 */
      function handleDraw(e) {
        source.clear()
        var geometry = e.feature.getGeometry()
        //1、初始化查询结构对象，设置查询结构包含几何信息
        var queryStruct = new Zondy.Service.QueryFeatureStruct()
        //是否包含几何图形信息
        queryStruct.IncludeGeometry = true
        //是否包含图形显示参数
        queryStruct.IncludeWebGraphic = true
        //2、创建一个用于查询的区
        var geomObj = new Zondy.Object.Polygon()
        geomObj.setByOL(geometry)
        //3、指定查询规则
        var rule = new Zondy.Service.QueryFeatureRule({
          //是否将要素的可见性计算在内
          EnableDisplayCondition: false,
          //是否完全包含
          MustInside: false,
          //是否仅比较要素的外包矩形
          CompareRectOnly: false,
          //是否相交
          Intersect: true,
        })
        //4、实例化查询参数对象
        var queryParam = new Zondy.Service.QueryParameter({
          geometry: geomObj,
          resultFormat: 'json',
          struct: queryStruct,
          rule: rule,
        })
        //5、实例化地图文档查询服务对象
        var queryService = new Zondy.Service.QueryDocFeature(
          queryParam,
          'guanggu',
          2,
          {
            ip: 'localhost',
            port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
          }
        )
        //执行查询操作，querySuccess为查询回调函数
        queryService.query(querySuccess)
      }

      function querySuccess(e) {
        that.dialogFormVisible3 = true
        source.clear()
        console.log(e.SFEleArray)
        that.queryEventsData = e.SFEleArray
        that.map.removeInteraction(draw)
      }
    },
    // 事件详情
    detialEvent() {
      this.dialogFormVisible2 = true
    },

    /*                                   用户管理弹窗相关                    */
    // 获取所有用户信息-分页（traffic和common）
    getAllUsers() {
      // 获取所有用户数据
      // 1.获取traffic数据
      this.$http
        .get(
          `/gg_user/?user_type=traffic&page=${this.currentTrafficPage} &size=${this.trafficSize}`
        )
        .then((res) => {
          if (res.code == 0) {
            this.trafficTotal = res.result.total

            var users = res.result.data
            users.map((item, index) => {
              // 分页
              var offset = (this.currentTrafficPage - 1) * this.trafficSize
              item.id = index + offset + 1

              // 在线离线：1是在线，0表示未登录
              if (item.user_onlinestatus == 1) {
                item.user_onlinestatus = '在线'
              } else {
                item.user_onlinestatus = '离线'
              }
              // 用户状态：1表示未被删除，0表示已经被删除
              if (item.user_other == 1) {
                item.user_other = '已激活'
              } else {
                item.user_other = '已删除'
              }

              var m = item.user_password
              item.hidden_password = ''
              for (var i = 0; i <= m.length; i++) {
                if (m.charAt(i)) {
                  item.hidden_password += '*'
                }
              }
              item.showPassword = true
              item.user_type = '交管部门'
              this.trafficTableData.push(item)
              console.log(this.trafficTableData)
            })
          }
        })

      //  2.获取common数据
      this.$http
        .get(
          `/gg_user/?user_type=common&page=${this.currentCommonPage} &size=${this.commonSize}`
        )
        .then((res) => {
          if (res.code == 0) {
            this.commonTotal = res.result.total

            var users = res.result.data

            users.map((item, index) => {
              // 分页
              var offset = (this.currentCommonPage - 1) * this.commonSize
              item.id = index + offset + 1
              // 在线离线：1是在线，0表示未登录
              if (item.user_onlinestatus == 1) {
                item.user_onlinestatus = '在线'
              } else {
                item.user_onlinestatus = '离线'
              }
              // 用户状态：1表示未被删除，0表示已经被删除
              if (item.user_other == 1) {
                item.user_other = '已激活'
              } else {
                item.user_other = '已删除'
              }

              var m = item.user_password
              item.hidden_password = ''
              for (var i = 0; i <= m.length; i++) {
                if (m.charAt(i)) {
                  item.hidden_password += '*'
                }
              }
              item.showPassword = true
              item.user_type = '普通用户'
              this.commonTableData.push(item)
              console.log(this.commonTableData)
            })
          }
        })
    },
    // 用户管理
    manageUsers() {
      this.manageDialogVisible = true
      this.commonTableData = []
      this.trafficTableData = []
      this.getAllUsers()
    },
    // 用户管理弹窗-交通部门-搜索
    handleTrafficSearch() {
      if (this.trafficSearch) {
        // 输入框不为空
        console.log('不为空')
        // 获取所有当前分类用户数据  不分页
        this.$http
          .get(`/gg_user/?user_type=traffic&page=1 &size=${this.trafficTotal}`)
          .then((res) => {
            if (res.code == 0) {
              var nn = res.result.data
              console.log(nn)
              var index_need
              var virtualSearch = nn.find((item, index) => {
                if (item.user_name === this.trafficSearch) {
                  index_need = index + 1
                  return item
                }
              })
              console.log('index', index_need)

              if (virtualSearch) {
                // 外面查到了,显示这条数据
                console.log('查到了', virtualSearch)
                // 查里面
                console.log(index_need, this.currentTrafficPage)
                this.currentTrafficPage = Math.ceil(
                  index_need / this.trafficSize
                )
                console.log('需跳转页', this.currentTrafficPage)
                // console.log('旧长度', this.trafficTableData.length);

                // 跳转前清空当前traffic数据
                // !!!!!!!!这里需要同时清空两个数据, 再重新根据当前页获取, 否则会出问题
                this.commonTableData = []
                this.trafficTableData = []
                // 跳转至数据所在页面
                this.getAllUsers()
                console.log(this.trafficTableData, '000')
                // 跳转至当前页对应条数, 设置样式突出显示
                var new_traffic_row = ''
                if (index_need % this.trafficSize == 0) {
                  new_traffic_row = this.trafficSize
                } else {
                  new_traffic_row = index_need % this.trafficSize
                }
                // 设置对应行数据高亮显示
                this.new_traffic_row = new_traffic_row - 1
                console.log('数据所在行', new_traffic_row)
                console.log('??')
                // 滚动至对应行
                var arr = this.trafficTableData
                var length = arr.length
                console.log('length', length) //0

                // 同步异步问题
                setTimeout(() => {
                  if (this.trafficTableData) {
                    var arr = this.trafficTableData
                    var length = arr.length
                    console.log('length', length) //5

                    for (var i = 0; i < this.trafficTableData.length; i++) {
                      if (this.trafficTableData[i].id % this.trafficSize == 0) {
                        this.trafficTableData[i].id_num = this.trafficSize
                      } else {
                        this.trafficTableData[i].id_num =
                          this.trafficTableData[i].id % this.trafficSize
                      }
                      if (
                        this.trafficTableData[i].id_num == this.new_traffic_row
                      ) {
                        var dom = this.$refs.trafficTable.bodyWrapper
                        console.log('dom', dom)
                        // 这里Dom还没更新
                        /*
                        vm.$nextTick( [callback] )
                        将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
                       */
                        this.$nextTick(() => {
                          // 现在Dom更新了
                          var dom2 =
                            this.$refs[
                              this.trafficTableData[i].user_id + 'ref_traffic'
                            ]
                          dom.scrollTo(0, dom2.offsetParent.offsetTop)
                        })
                        this.trafficSearch = ''
                        this.$refs.trafficSearch.focus()
                        return
                      } else {
                        console.log('出错1')
                      }
                    }
                  }
                }, 500)
              } else {
                // 没查到,提示无
                console.log('没有查到')
                this.$message.error('未找到相关数据')
                this.trafficSearch = ''
                this.$refs.trafficSearch.focus()
              }
            }
          })
      } else {
        // 搜索框为空
        console.log('为空')
        this.$message({
          type: 'error',
          message: '搜索用户名不能为空，请重新输入!',
          duration: 900,
        })
      }
    },
    // 用户管理弹窗-普通用户-搜索
    handleCommonSearch() {
      if (this.commonSearch) {
        // 输入框不为空
        console.log('不为空')
        // 获取所有当前分类用户数据  不分页
        this.$http
          .get(`/gg_user/?user_type=common&page=1 &size=${this.commonTotal}`)
          .then((res) => {
            if (res.code == 0) {
              let nn = res.result.data
              console.log(nn)
              let index_need
              let virtualSearch = nn.find((item, index) => {
                if (item.user_name === this.commonSearch) {
                  index_need = index + 1
                  return item
                }
              })
              console.log('index', index_need)

              if (virtualSearch) {
                // 外面查到了,显示这条数据
                console.log('查到了', virtualSearch)
                // 查里面
                console.log(index_need, this.currentCommonPage)
                this.currentCommonPage = Math.ceil(index_need / this.commonSize)
                console.log('需跳转页', this.currentCommonPage)

                // 跳转前清空当前common数据
                this.commonTableData = []
                this.trafficTableData = []
                // 跳转至数据所在页面
                this.getAllUsers()
                console.log(this.commonTableData, '000')
                // 跳转至当前页对应条数, 设置样式突出显示
                let new_common_row = ''
                if (index_need % this.commonSize == 0) {
                  new_common_row = this.commonSize
                } else {
                  new_common_row = index_need % this.commonSize
                }
                // 设置对应行数据高亮显示
                this.new_common_row = new_common_row - 1
                console.log('数据所在行', new_common_row)
                console.log('??')
                // 滚动至对应行
                let arr = this.commonTableData
                let length = arr.length
                console.log('length', length) //0

                // 同步异步问题
                setTimeout(() => {
                  if (this.commonTableData) {
                    let arr = this.commonTableData
                    let length = arr.length
                    console.log('length', length) //5

                    for (var i = 0; i < this.commonTableData.length; i++) {
                      if (this.commonTableData[i].id % this.commonSize == 0) {
                        this.commonTableData[i].id_num = this.commonSize
                      } else {
                        this.commonTableData[i].id_num =
                          this.commonTableData[i].id % this.commonSize
                      }
                      if (
                        this.commonTableData[i].id_num == this.new_common_row
                      ) {
                        let dom = this.$refs.commonTable.bodyWrapper
                        // 这里Dom还没更新
                        /*
                        vm.$nextTick( [callback] )
                        将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
                       */
                        this.$nextTick(() => {
                          // 现在Dom更新了
                          var dom2 =
                            this.$refs[
                              this.commonTableData[i].user_id + 'ref_common'
                            ]
                          dom.scrollTo(0, dom2.offsetParent.offsetTop)
                        })
                        this.commonSearch = ''
                        this.$refs.commonSearch.focus()
                        return
                      } else {
                        console.log('出错2')
                      }
                    }
                  }
                }, 500)
              } else {
                // 没查到,提示无
                console.log('没有查到')
                this.$message.error('未找到相关数据1')
                this.commonSearch = ''
                this.$refs.commonSearch.focus()
              }
            }
          })
      } else {
        // 搜索框为空
        console.log('为空')
        this.$message({
          type: 'error',
          message: '搜索用户名不能为空，请重新输入!',
          duration: 900,
        })
      }
    },
    // 用户管理弹窗-交通部门和普通用户添加
    handleUserAdd(message) {
      // 添加交管部门账号
      if (message == 'traffic') {
        this.addType = '添加交通部门账号'
        this.addForm.user_type = '交管部门'
        console.log(message)
        this.addDialogVisible = true
      } else {
        // 添加普通用户账号
        this.addType = '添加普通用户'
        this.addForm.user_type = '普通用户'
        console.log(message)
        this.addDialogVisible = true
      }
    },
    // 用户管理弹窗-添加-添加弹窗-取消按钮
    cancelAdd() {
      this.addForm = []
      this.addDialogVisible = false
    },
    // 用户管理弹窗-添加-添加弹窗-确定按钮
    submitAdd(m) {
      console.log('m', m)
      // 1表单验证
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          console.log('表单验证成功')
          // 2.发送添加请求
          var user_type = 'common'
          if (this.addForm.user_type == '交管部门') {
            user_type = 'traffic'
          }
          this.$http
            .post('/gg_user', {
              user_name: this.addForm.user_name,
              user_password: this.addForm.confirmPassword,
              user_type,
            })
            .then((res) => {
              if (res.code == 0) {
                // 添加成功
                this.$alert('添加新用户成功！', '添加成功', {
                  confirmButtonText: '关闭',
                  callback: () => {
                    this.$refs['addForm'].resetFields()
                    this.addDialogVisible = false
                    // 清空原数据
                    this.commonTableData = []
                    this.trafficTableData = []
                    // 跳转至新添加数据位置
                    if (user_type == 'common') {
                      // console.log('common000000');
                      this.currentCommonPage = Math.ceil(
                        this.commonTotal / this.commonSize
                      )
                      console.log('新', this.currentTrafficPage)
                    } else {
                      // console.log('traffic000000');

                      this.currentTrafficPage = Math.ceil(
                        this.trafficTotal / this.trafficSize
                      )
                      console.log('新', this.currentCommonPage)
                    }
                    // 渲染数据
                    this.getAllUsers()
                  },
                })
              } else {
                // 添加失败
                this.$alert('添加新用户失败！请稍后重试。', '添加失败', {
                  confirmButtonText: '关闭',
                  callback: () => {
                    this.$refs['addForm'].resetFields()
                    // this.addDialogVisible = false;
                  },
                })
              }
            })
        } else {
          console.log('表单验证失败')
          this.$message({
            type: 'error',
            message: '请按提示完成添加操作',
            duration: 900,
          })
        }
      })
    },

    // 用户管理弹窗-交通部门-删除
    deleteTrafficSelections() {
      if (this.trafficSelections.length == 0) {
        this.$message({
          type: 'error',
          message: '请在表格首列选择要删除的账号',
          duration: 900,
        })
      } else {
        // 多选删除  遍历删除
        this.trafficSelections.forEach((item) => {
          this.$http
            .delete(`/gg_user/${item.user_id}?flag=true`)
            .then((res) => {
              console.log(res)
            })
        })
        this.trafficSelections = []
        this.trafficTableData = []
        this.commonTableData = []
        console.log('清空了')

        this.getAllUsers()
      }
    },
    // 用户管理弹窗-普通用户-删除
    deleteCommonSelections() {
      if (this.commonSelections.length == 0) {
        this.$message({
          type: 'error',
          message: '请在表格首列选择要删除的账号',
          duration: 900,
        })
      } else {
        // 多选删除  遍历删除
        this.commonSelections.forEach((item) => {
          this.$http
            .delete(`/gg_user/${item.user_id}?flag=true`)
            .then((res) => {
              console.log(res)
            })
        })
        this.commonSelections = []
        this.trafficTableData = []
        this.commonTableData = []
        console.log('测试', this.commonTableData)

        this.getAllUsers()
      }
    },
    // 用户管理弹窗-交通部门-更改
    handleTrafficSelectionChange(val) {
      console.log(val)
      this.trafficSelections = val
    },
    // 用户管理弹窗-普通用户-选项改变
    handleCommonSelectionChange(val) {
      console.log(val)
      this.commonSelections = val
    },
    //用户管理弹窗-交通部门-改变行样式
    trafficTableRowClassName({ row, rowIndex }) {
      if (rowIndex == this.new_traffic_row) {
        return { background: 'rgb(180, 229, 236)' }
      }
      return ''
    },
    //用户管理弹窗-普通用户-改变行样式
    CommonTableRowClassName({ row, rowIndex }) {
      if (rowIndex == this.new_common_row) {
        return { background: 'rgb(222, 189, 235)' }
      }
      return ''
    },
    // 用户管理弹窗-交通部门-分页器
    handleTrafficSizeChange(val) {
      this.trafficSize = val
      this.trafficTableData = []
      this.commonTableData = []
      this.getAllUsers()
    },
    // 用户管理弹窗-交通部门-分页器
    handleTrafficCurrentChange(val) {
      this.currentTrafficPage = val
      this.trafficTableData = []
      this.commonTableData = []
      this.getAllUsers()
    },
    // 用户管理弹窗-普通用户-分页器
    handleCommonSizeChange(val) {
      this.commonSize = val
      this.trafficTableData = []
      this.commonTableData = []
      this.getAllUsers()
    },
    // 用户管理弹窗-普通用户-分页器
    handleCommonCurrentChange(val) {
      this.currentCommonPage = val
      this.trafficTableData = []
      this.commonTableData = []
      this.getAllUsers()
    },
    // 用户管理弹窗-根据用户类型显示密码
    handleShowPassword(user) {
      console.log(user)
      if (user.user_type == '交管部门') {
        var new_user = this.trafficTableData.find(
          (item) => item.user_id == user.user_id
        )
      } else if (user.user_type == '普通用户') {
        var new_user = this.commonTableData.find(
          (item) => item.user_id == user.user_id
        )
      }
      if (new_user.showPassword === true) {
        new_user.showPassword = false
        new_user.hidden_password = new_user.user_password
      } else {
        new_user.showPassword = true
        var m = new_user.user_password
        new_user.hidden_password = ''
        for (var i = 0; i <= m.length; i++) {
          if (m.charAt(i)) {
            new_user.hidden_password += '*'
          }
        }
      }
    },

    // 用户管理弹窗-操作-权限升级降级（交通部门->用户，用户->交通部门）
    handleupdateUser(user) {
      if (user.user_type == '交管部门') {
        // 切换至普通用户
        this.$http
          .put('/gg_user/' + user.user_id, { user_type: 'common' })
          .then((res) => {
            if (res.code == 0) {
              // 清空原渲染数据
              this.trafficTableData = []
              this.commonTableData = []
              // 重新渲染数据
              this.getAllUsers()
            }
          })
      } else if (user.user_type == '普通用户') {
        // 切换至交管部门
        this.$http
          .put('/gg_user/' + user.user_id, { user_type: 'traffic' })
          .then((res) => {
            if (res.code == 0) {
              // 清空原渲染数据
              this.trafficTableData = []
              this.commonTableData = []
              // 重新渲染数据
              this.getAllUsers()
            }
          })
      }
    },
    // 用户管理弹窗-操作-修改
    handleEditUser(user) {
      // 修改当前用户
      this.editDialogVisible = true
      this.editForm.user_id = user.user_id
      this.editForm.user_name = user.user_name
      this.editForm.user_password = user.user_password
      this.user_onlinestatus = 0
    },
    //
    clearSearchStyle() {
      this.new_traffic_row = -1
      ;(this.new_common_row = -1), (this.trafficSearch = '')
      this.commonSearch = ''
      console.log('点击表单')
    },
    // 用户管理弹窗-操作-修改-管理员修改当前用户-取消按钮
    cancelEdit() {
      this.editForm = []
      this.editDialogVisible = false
    },
    // 用户管理弹窗-操作-修改-管理员修改当前用户-确定按钮
    submitEdit() {
      console.log('提交中')
      // 表单验证
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          // 表单验证通过
          // 更新用户名和密码
          this.$http
            .put('/gg_user/' + this.editForm.user_id, this.editForm)
            .then((res) => {
              if (res.code == 0) {
                // 修改成功
                this.$alert('修改用户信息成功！', '修改成功', {
                  confirmButtonText: '关闭',
                  callback: () => {
                    this.$refs['editForm'].resetFields()
                    this.editDialogVisible = false
                    // 清空原数据
                    this.commonTableData = []
                    this.trafficTableData = []

                    // 渲染数据
                    this.getAllUsers()
                  },
                })
              } else {
                // 修改失败
                this.$alert('修改用户信息失败！请稍后重试。', '修改失败', {
                  confirmButtonText: '关闭',
                  callback: () => {
                    this.$refs['addForm'].resetFields()
                    // this.addDialogVisible = false;
                  },
                })
              }
            })
        } else {
          // 表单验证不通过
          // 提示按要求完成修改
          this.$message({
            type: 'error',
            message: '请按提示完成修改操作',
            duration: 900,
          })
        }
      })
    },
    // 用户管理弹窗-操作-管理
    handleDeleteUser(user) {
      // 切换 激活/删除 状态
      if (user.user_other == '已激活') {
        this.$http.delete('/gg_user/' + user.user_id).then((res) => {
          if (res.code == 0) {
            // 清空原渲染数据
            this.trafficTableData = []
            this.commonTableData = []
            // 重新渲染数据
            this.getAllUsers()
          }
        })
      } else {
        // 已删除状态-->激活状态
        this.$http
          .delete('/gg_user/' + user.user_id + '?id=' + user.user_id)
          .then((res) => {
            if (res.code == 0) {
              // 清空原渲染数据
              this.trafficTableData = []
              this.commonTableData = []
              // 重新渲染数据
              this.getAllUsers()
            }
          })
      }
    },
    // 用户管理弹窗-操作-下线
    handleOffLine(user) {
      // 更新登录状态-->下线
      if (user.user_onlinestatus == '在线') {
        this.$http
          .put('/gg_user/' + user.user_id, { user_onlinestatus: 0 })
          .then((res) => {
            if (res.code == 0) {
              // 重新渲染数据
              this.trafficTableData = []
              this.commonTableData = []
              this.getAllUsers()
            } else {
              this.$alert('操作超时！请稍后重试。', '提示', {
                confirmButtonText: '关闭',
                callback: () => {
                  return ''
                },
              })
            }
          })
      } else {
        this.$alert('当前用户为离线状态！无需下线。', '提示', {
          confirmButtonText: '关闭',
          callback: () => {
            return ''
          },
        })
      }
    },

    /*                          修改密码弹窗相关                      */
    // 修改密码弹窗
    updatePassword() {
      this.updateForm.user_name = this.user.user_name
      this.updateDialogVisible = true
      console.log(this.user.user_id)
      // 发送请求, 回显数据
      this.$http.get(`/gg_user/${this.user.user_id}`).then((res) => {
        console.log(res)
        this.old_password = res.result.user_password
        console.log(this.old_password)
      })
    },
    // 修改密码弹窗-旧密码
    checkOldPassword() {
      if (this.old_password != this.updateForm.old_password) {
        return true
      } else {
        return false
      }
    },
    // 修改密码弹窗-新密码
    checkUpdateConfirmPassword() {
      if (this.updateForm.new_password != this.updateForm.confirmPassword) {
        return true
      } else {
        return false
      }
    },
    // 修改密码弹窗-取消按钮
    cancelUpdate() {
      this.updateDialogVisible = false
    },
    // 修改密码弹窗-确定按钮
    submitUpdate() {
      // 表单验证
      this.$refs['updateForm'].validate((valid) => {
        // 1. 验证通过
        if (valid) {
          console.log('验证通过')
          // 1.1发送ajax请求, 修改用户数据
          this.$http
            .put('/gg_user/' + this.user.user_id, {
              user_password: this.updateForm.confirmPassword,
            })
            .then((res) => {
              // 1.2 修改成功, 清除cookie, 返回登录页面,重新登录
              if (res.code == 0) {
                // 提示修改成功
                this.$alert(
                  '修改成功！账号登录过期，请重新登录。',
                  '修改成功',
                  {
                    confirmButtonText: '前往登录',
                    callback: () => {
                      console.log('已到登录页')
                      this.$refs['updateForm'].resetFields()
                      this.$cookies.remove('status')
                      this.$router.push('/login')
                    },
                  }
                )
              } else {
                // 修改失败 提示失败信息
                this.$alert('修改失败！请重试。', '修改失败', {
                  confirmButtonText: '重试',
                  callback: () => {
                    console.log('重试修改')
                    this.$refs['updateForm'].resetFields()
                  },
                })
              }
            })
        } else {
          // 2. 验证不通过
          this.$message({
            type: 'error',
            message: '请按提示完成修改',
            duration: 900,
          })
          console.log('验证不通过')
        }
      })
    },
    // 退出登录
    escLogin() {
      // 删除cookie
      this.$cookies.remove('status')
      this.$router.push('/login')
      console.log('退出成功')
    },

    /*                   修改用户信息相关           */
    //
    checkSpecialKey(str) {
      let specialKey = '[/,*,-,`,#]'
      for (let i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
          return false
        }
      }
      return true
    },
    //
    checkuser_name() {
      var check = this.all.find(
        (item) => item.user_name == this.addForm.user_name
      )
      if (check) {
        return true
      } else {
        return false
      }
    },
    //
    checkAddConfirmPassword() {
      if (this.addForm.user_password != this.addForm.confirmPassword) {
        return true
      } else {
        return false
      }
    },

    /* 视频监控 */
    highlightvideo() {
      // console.log('点了');
      this.highLightCamera == true
        ? (this.highLightCamera = false)
        : (this.highLightCamera = true)
      this.$store.dispatch('camera', this.highLightCamera)
    },
  },
}
</script>

<style>
#header {
  background-color: #545c64;
}

#search {
  float: left;
  position: fixed;
  right: 195px;
}
#search > .el-input {
  width: auto;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 10px;
  background: #e0e0e0;
}
#search > .el-button {
  position: fixed;
  right: 195px;
  padding: 6px 10px;
  border-radius: 20px;
  margin: 13px;
}
#user {
  position: fixed;
  right: 95px;
  top: 15px;
  display: inline-block;
}
#user #username {
  color: #e0e0e0;
  display: inline-block;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
#manageDialog {
  height: 700px;
}
#manageDialog .el-dialog {
  height: 700px;
}
#manageDialog .trafficUsers {
  height: 270px;
}
#manageDialog .commonUsers {
  height: 270px;
}
#manageDialog hr {
  margin: 15px 0 10px 0;
}
#manageDialog .el-table {
  font-size: 10px;
  /* zoom: 0.83; */
}
#manageDialog .header_box {
  justify-content: space-between;
  height: 22px;
  padding: 5px 0;
  font-size: 14px;
}
#manageDialog .trafficUsers .search {
  background: #43c0d3;
  border: #43c0d3;
  color: white;
  margin-left: 10px;
}
#manageDialog .commonUsers .search {
  background: #af51d7;
  border: #af51d7;
  color: white;
  margin-left: 10px;
}
#manageDialog .Tool {
  float: right;
}
#manageDialog .header_box .el-button--small {
  padding-top: 7px;
  padding-left: 5px;
  padding-right: 7px;
  padding-bottom: 7px;
  margin-left: 10px;
  align-items: center;
}

#manageDialog .header_box .el-input {
  width: 150px;
  bottom: 5px;
  margin-right: 5px;
}
#manageDialog .header_box p {
  flex: 1;
  padding: 0 5px;
  font-size: 14px;
  color: rgb(19, 22, 22);
}
#manageDialog .el-table .el-button--small {
  float: right;
  margin-left: 1px;
  padding-left: 3px;
}
#togglePasswordShow {
  display: flex;
  justify-content: space-around;
}
#togglePasswordShow span {
  flex: 1;
  text-align: center;
  line-height: 23px;
}
#togglePasswordShow i {
  cursor: pointer;
  line-height: 23px;
}
#manageDialog #showOnlineState,
#showNumberState {
  display: flex;
  justify-content: space-around;
}
#manageDialog #showOnlineState .el-button {
  background: #f3f4f5;
  border-color: #f3f4f5;
  color: rgb(177, 174, 174);
  cursor: default;
}
#manageDialog #showNumberState .el-button {
  background: #f3f4f5;
  border-color: #f3f4f5;
  color: rgb(177, 174, 174);
  cursor: default;
}
.online {
  background: rgb(21, 105, 30) !important;
  border: pink !important;
  color: white !important;
}

.offline {
  background: rgb(157, 201, 132) !important;
  border: pink !important;
  color: white !important;
}
.onactive {
  background: rgb(106, 90, 205) !important;
  border: pink !important;
  color: white !important;
}
.offactive {
  background: rgb(0, 255, 255) !important;
  border: pink !important;
  color: white !important;
}
#manageDialog .el-pagination {
  margin-top: 5px;
}
#updateDialog .el-input {
  width: 85%;
}
#updateDialog .el-form-item {
  margin-bottom: 15px;
}
#updateDialog .dialog-footer {
  margin-right: 38px;
}
.dialog-footer {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
/* 公告处理-发布公告 */
.announcement {
  z-index: 200;
  position: fixed;
  top: 100px;
  right: 100px;
  width: 480px;
  height: 460px;
  padding: 20px 0px 20px 20px;
  background-color: #fff;
}
.announcement .close {
  position: absolute;
  cursor: pointer;
  right: 15px;
  top: 10px;
}
.announcement .el-button {
  position: absolute;
  right: 20px;
}
.announcement .el-table {
  margin-bottom: 10px;
}
.announcement .el-input {
  position: absolute;
  margin-top: 10px;
}
/* 事件管理 */
#eventAdd {
  position: fixed;
  z-index: 200;
  top: 100px;
  right: 100px;
  width: 470px;
  height: 450px;
  padding: 20px 0px 20px 20px;
  background-color: rgba(255, 255, 255, 1);
}
#addEventTitle {
  margin-bottom: 10px;
}
#eventAdd .el-input {
  width: 90% !important;
}
</style>
